<template>
   <li>
    <label>
        <input @change="handleCheck(todo.id)" type="checkbox" :checked="todo.done">
        <!-- 如下代码也能实现功能，但不太推荐，因为有点违反原则，因为修改了props，只不过vue没有检测到 -->
        <!-- <input type="checkbox" v-model="todo.done"> -->
        <span>{{todo.title}}</span>
    </label>
    <button @click="handleDelete(todo.id)" class="btn btn-danger" >删除</button>
   </li>
</template>

<script>
    export default {
        name: 'MyItem',
        //声明接收todo对象
        props: ['todo', 'checkTodo', 'deleteTodo'],
        methods: {
            // 勾选or取消勾选
            handleCheck (id) {
                //通知app组件将对应todo对象done值去反
                this.checkTodo(id)
            },
            // 删除
            handleDelete (id) {
                if (confirm('确定删除吗?')) {
                    // 通知app删除对应项
                    this.deleteTodo(id)
                }
            }
        }
    }
</script>

<style scoped>
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }
    li label {
        float: left;
        cursor: pointer;
    }
    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }
    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }
    li:before {
        content: initial
    }
    li:last-child {
        border-bottom: none;
    }
    li:hover {
        background: #ddd;
    }
    li:hover button{
       display: block;
    }
</style>